<template>
<div id="nav">
	<router-link to="/ExampleList1">ExampleList1</router-link> |
	<router-link to="/ExampleList2">ExampleList2</router-link> |
	<router-link to="/">Home</router-link> |
	<Header></Header>
	<component :is="currentLayout"></component>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import LayoutNone from '@/layout/LayoutNone.vue';
import Layout1 from '@/layout/Layout1.vue';
import Layout2 from '@/layout/Layout2.vue';
import Header from '@/components/Header.vue';

export default defineComponent({
	name: 'App',
	components: {
		Layout1,
		Layout2,
		LayoutNone,
		Header,
	},
	computed: {
		// 使用何种布局方式
		currentLayout () {
			return this.$route.meta.layout || 'LayoutNone';
		}
	}
});
</script>

<style lang="scss">
</style>
